import React, { useState } from 'react'
import { Button, Toast, TextArea, Rate } from 'antd-mobile'
import { LeftOutline, FileOutline } from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import './content.scss'
import API from '../../api/comment'
import { store } from '../../../store'
import API_order from "../../api/order";


export default function Content() {
    const navigate = useNavigate()
    const location = useLocation()
    const [value, setValue] = useState('')
    const [star, setStar] = useState(0)
    const { _id, token,username } = store.getState().userReducer.user
    const orderDel = async () => {
        let res = await API_order['orderDel']({ token, id: location.state._id })
        console.log(res, '删除订单')
    }
    const content = async () => {
        let res = await API['comment']({ token, content: value, star: star, goods_id: location.state.goods[0]._id ,username:username})
        console.log(res, '评论成功')
        setTimeout(() => {
            Toast.show({
                content: '评论成功',
                position: 'top'
            })
            orderDel()
            navigate(-1)
        }, 1500)
    }
    return (
        <div>
            <div className='content_back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                评价
            </div>
            <div className='content_main'>
                <TextArea placeholder='请输入你的评价' autoSize={true} value={value}
                    onChange={val => {
                        setValue(val)
                    }} />

                <div><span>商品满意度：</span><Rate onChange={(val) => setStar(val)} defaultValue={3} allowClear={false} /></div>
                <div><span>客服满意度：</span><Rate defaultValue={3} allowClear={false} /></div>
                <div><Button color='primary' onClick={content}>提交</Button></div>
            </div>
        </div>
    )
}
